<script lang="ts">
	import { imageBasePath, variables } from '$store/g';
	import RetinaBgImage from '$lib/RetinaBgImage.svelte';
	import CustomerCaseCard from '$lib/CustomerCaseCard.svelte';
</script>

<div class="mx-auto mt-16 w-[1259px] grid grid-cols-2">
	<div class="pl-[38px] pt-[102px]">
		<div class="pb-4 text-[40px] font-semibold w-[569px]">
			七星便利店携手{$variables.siteName}，打造私域数字化经营平台
		</div>
		<div class="text-[#999999] text-xl leading-[32px] w-[508px]">
			线上线下一体化，构建微信私域运营产品矩阵，赋能品牌+消费体验升级
		</div>
		<div class="pt-20">
			<a
				class="rounded-[37.5px] px-4 py-2 text-xl bg-primary text-white flex justify-center items-center w-36 h-16"
				href="void:(0)">了解详情</a
			>
		</div>
	</div>
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution.png"
		img2xSrc="{$imageBasePath}/solution@2x.png"
		alt="solution"
		classes="w-[621px] h-[460px] bg-no-repeat bg-cover bg-center"
	/>
</div>
<div class="mx-auto mt-3 w-[1324px] h-[224px] bg-[#f9f9f9] rounded-3xl grid grid-cols-6">
	<div class="stat-dimension">
		<div class="stat-dimension-value">1000+</div>
		<div class="stat-dimension-name">品牌选择</div>
	</div>
	<div class="stat-dimension">
		<div class="stat-dimension-value">1600+</div>
		<div class="stat-dimension-name">分销员选择</div>
	</div>
	<div class="stat-dimension">
		<div class="stat-dimension-value">2000+</div>
		<div class="stat-dimension-name">代言人选择</div>
	</div>
	<div class="stat-dimension">
		<div class="stat-dimension-value">80+</div>
		<div class="stat-dimension-name">覆盖行业</div>
	</div>
	<div class="stat-dimension">
		<div class="stat-dimension-value">100亿+</div>
		<div class="stat-dimension-name">交易额</div>
	</div>
	<div class="stat-dimension">
		<div class="stat-dimension-value">5000万+</div>
		<div class="stat-dimension-name">用户数</div>
	</div>
</div>
<div class="mt-16 mb-12 text-center mx-auto  w-[1324px] text-[40px] font-semibold">浏览更多客户案例</div>
<div class="mx-auto w-[1324px]">
	<CustomerCaseCard />
</div>

<style lang="scss">
	.stat-dimension {
		@apply flex flex-col pt-[66px] items-center justify-start;
		.stat-dimension-value {
			@apply text-primary text-[32px] font-semibold;
		}
		.stat-dimension-name {
			@apply text-[#666666] pt-[19px] text-xl;
		}
	}
</style>
